<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录</title>
		<link rel="stylesheet" href="../css/login.css" />
	</head>
	<body>
		<!--
        	作者：318990114@qq.com
        	时间：2017-12-23
        	描述：header
        -->
        <div id="headerbox">
	        <div id="header">
	        	<h1><a href="../index.html"><img src="../img/logo.png" alt="" /></a></h1>
	        	<span>登录</span>
	        </div>
	    </div>
	    <!--
        	作者：318990114@qq.com
        	时间：2018-01-02
        	描述：content
        -->
        <div id="contentbox">
        	<div id="content" class="clear">
        		<div id="window">
        			<h1>登录成功！正在跳转……</h1>
        			<h2></h2>
        		</div>
        		<a href="#"><img src="../img/login2.jpg" alt="" /></a>
        		<form action="" class="clear">
        			<h1><b>欢迎登录</b><span>还没有账号？<a href="register.html">立即注册</a></span></h1>
        			<h5></h5>
        			<h2><i></i><input class="txt" type="text" placeholder="邮箱/账号/已验证手机"/></h2>
        			<h2><i></i><input class="txt" type="password" placeholder="密码"/></h2>
        			<h2>
        				<i></i>
        				<input class="txt" type="text" placeholder="验证码" class="input"/>
        				<div id="box"></div>
						<input type="button" id="button1" value="换一张" />
        			</h2>
        			<h2><input type="checkbox" />自动登录 <a href="#">忘记登录密码？</a></h2>
        			<input type="button" id="login" value="登   录"/>
        			<h2>
        				<p>第三方登录</p>
        				<a href="#"><img src="../img/login5.jpg" alt="" /></a>
        				<a href="#"><img src="../img/login6.jpg" alt="" /></a>
        				<a href="#"><img src="../img/login7.jpg" alt="" /></a>
        			</h2>
        		</form>
        	</div>
        	<div id="bar"></div>
        </div>
	    <!--
        	作者：318990114@qq.com
        	时间：2017-12-27
        	描述：footer
        -->
        <div id="footerbox">
        	<div id="footer">
        		<div>
        			<h3>新手指南</h3>
        			<ul>
        				<li><a href="#">账户注册</a></li>
        				<li><a href="#">购物流程</a></li>
        				<li><a href="#">订购方式</a></li>
        				<li><a href="#">悠币说明</a></li>
        				<li><a href="#">会员等级</a></li>
        			</ul>
        		</div>
        		<div>
        			<h3>付款方式</h3>
        			<ul>
        				<li><a href="#">支付方式</a>/<a href="#">发票说明</a></li>
        				<li><a href="#">充值说明</a>/<a href="#">储值卡说明</a></li>
        				<li><a href="#">优惠代码</a>/<a href="#">礼品卡说明</a></li>
        				<li><a href="#">卡券购买章程</a></li>
        			</ul>
        		</div>
        		<div>
        			<h3>配送方式</h3>
        			<ul>
        				<li><a href="#">配送运费</a></li>
        				<li><a href="#">配送范围</a></li>
        				<li><a href="#">配送时间</a></li>
        			</ul>
        		</div>
        		<div>
        			<h3>售后服务</h3>
        			<ul>
        				<li><a href="#">退换货政策</a></li>
        				<li><a href="#">退换货流程</a></li>
        				<li><a href="#">常见问题</a></li>
        				<li><a href="#">极速退款</a></li>
        				<li><a href="#">投诉与建议</a></li>
        			</ul>
        		</div>
        		<div>
        			<h3>关于我们</h3>
        			<ul>
        				<li><a href="#">公司介绍</a></li>
        				<li><a href="#">联系我们</a></li>
        				<li><a href="#">业务合作</a></li>
        				<li><a href="#">诚信举报</a></li>
        				<li><a href="#">人才招聘</a></li>
        				<li><a href="#">友情链接</a></li>
        			</ul>
        		</div>
        		<h1>客服热线 400-000-7788 企业采购或团购，请转2号键咨询&nbsp;&nbsp;&nbsp;&nbsp;周一至周日 9:00-21:00</h1>
        		<h2>所有图片均受著作权保护，未经许可任何单位与个人不得使用、复制、转载、摘编，违者必究法律责任。</h2>
        		<h2><a href="#">沪ICP备09008015号</a>&nbsp;Copyright &copy; 2005-2017&nbsp;<a href="#">上海易果电子商务有限公司</a>版权所有</h2>
        		<h4>
        			<a href="#"><img src="../img/footer1.png" alt="" /></a>
        			<a href="#"><img src="../img/footer2.png" alt="" /></a>
        			<a href="#"><img src="../img/footer3.gif" alt="" /></a>
        			<a href="#"><img src="../img/footer4.png" alt="" />沪公网安备 31010502000002号</a>
        		</h4>
        	</div>
        </div>
	</body>
	<script>
		var cookies = document.cookie;
		var oButton = document.getElementById("button1");
		var oBox = document.getElementById("box");
		var oTxt = document.getElementsByClassName("txt");
		var oSubmit = document.getElementById("login");
		var oWindow = document.getElementById("window");
		var oH5 = document.getElementsByTagName("h5")[0];
		var oH2 = document.querySelector("#window h2");
		authCode();
		oButton.onclick = function(){
			authCode();
		}
		function authCode(){
			var str = "";
			for(var i = 1;i < 5;i ++){
				str += Math.floor(Math.random() * 10);
			 }
			oBox.innerHTML = str;
		}
		oSubmit.onclick = function(){
			//console.log(cookies);
			var arr = [];
			cookies.split("; ").filter(function(value){
				return value.slice(0,4) == "user";
			}).forEach(function(value){
				arr.push(JSON.parse(value.split("=")[1]));
			});
			var user = false;
			var userindex = null;
			arr.forEach(function(value,index){
				if(value.user == oTxt[0].value){
					user = true;
					userindex = index;
				}
			})
			if(oTxt[2].value != oBox.innerHTML){
				oH5.style.display = "block";
				oH5.innerHTML = "请输入正确的验证码"
			}else{
				if(user == false){
					oH5.style.display = "block";
					oH5.innerHTML = "用户名不存在";
				}else{
					if(arr[userindex].pwd != oTxt[1].value){
						oH5.style.display = "block";
						oH5.innerHTML = "密码错误";
					}else{
						oH5.style.display = "none";
						oWindow.style.display = "block";
						document.cookie = "login=" + oTxt[0].value + ";path=/";
						var a = 4;
						var timer = setInterval(function(){
							a --;
							oH2.innerHTML = a;
							if(a == 0){
								clearInterval(timer);
								window.location = "../index.html";
							}
						},1000)
					}
				}
			}
		}
	</script>
</html>
